<template>
	<!-- 钱包 -->
	<view class="pages-home">
		<view class="pd-md">
			
			<fixed>
				<tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1" :activeColor="primaryColor"
					:width="100/tabList.length + '%'" height="100rpx"></tab>
				<view class="b-1px-b"></view>
			</fixed>
			
			<view v-if="activeIndex == 0">
				
				<view class="fill-base flex-between flex-center radius-20 pd-md mb-md">
					<view class="flex-column flex-center" style="width: 40%;">
						<view class="f-caption c-caption mb-lg">幸福米</view>
						<view class="f-title c-title">{{detail.score.toFixed(2)}}</view>
						<text v-if="is_ios == 0" style="color:#fff;background-color: #8228f9;border-radius: 15rpx;padding:15rpx 50rpx;text-align: center;" @click="showPopupFromBottom">购买</text>
						<view @click="goWebView('1')" class="f-desc c-base radius-16 flex-center mb-sm" style="width: 150rpx; height: 60rpx;background-color: gray;margin-top: 10rpx;;">充值明细</view>
					</view>
					
					<view class="flex-between flex-center" style="width:60%;">
						<view class="flex-column flex-center" style="width: 50%;">
							<view class="f-caption c-caption mb-lg">幸福豆豆</view>
							<view class="f-title c-title">{{userInfo.withdraw}}/<text style="font-size: 10px;color:grey;">{{userInfo.hbean}}</text></view>
						</view>
						
						<view class="flex-column flex-center" style="width: 50%;">
							
							<view @click="sign" class="f-desc c-base radius-16 flex-center mb-sm" style="padding: 15rpx 50rpx;" :style="is_sign==1?'background-color:lightgrey;':'background-color: red;'" >签到</view>
							
							<view @click="gorecord" class="f-desc c-base radius-16 flex-center mb-sm" style="margin-top:110rpx;width: 150rpx; height: 60rpx;background-color: gray">豆豆明细</view>
							
						</view>
						
					</view>
				</view>
				
				<!-- <view class="fill-base flex-column flex-center radius-20 pd-md mb-md">
					<view class="flex-between" style="width: 100%;">
						<view class="f-caption c-caption">请选择要开通的会员类型</view>
						<view class="f-caption c-caption" @click="goVip">会员列表</view>
					</view>
					<view class="total-box flex-center mt-md" style="width: 98%;">
						<view style="width: 100%;" v-for="(item, index) in coins" :width="100/coins.length + '%'">
							<view @tap.stop='handerCoinChange(item, index)' class="flex-center flex-column box-btn3" :style="{backgroundImage:'url('+imagesrc[index]+')'}">
								<view class="f-paragraph mt-md"></view>
							</view>
						</view>
					</view>
				</view> -->
				
				<!-- <image mode="aspectFill" v-if="coinChangeindex == 0" style="width: 100%;" src="/static/common/pay_bg1.png"></image>
				<image mode="aspectFill" v-if="coinChangeindex == 1" style="width: 100%;" src="/static/common/pay_bg1.png"></image>
				<image mode="aspectFill" v-if="coinChangeindex == 2" style="width: 100%;" src="/static/common/pay_bg1.png"></image> -->
				<!-- <image v-if="coinChangeindex == 0" class="image1" mode="aspectFill" src="/static/common/pay_bg_199.png"></image>
				<image v-if="coinChangeindex == 1" class="image1" mode="aspectFill" src="/static/common/pay_bg_2999.png"></image>
				<image v-if="coinChangeindex == 2" class="image1" mode="aspectFill" src="/static/common/pay_bg_9999.png"></image> -->
				<!-- <view class="shop-bg flex-column" style="background-color: #FEBCC0;margin:15px;">
					<view style="font-size: 50px;font-weight: bold;text-align: center;color:darkred;margin: 17px;margin-bottom: 10px;">城市生活</view>
								<view style="font-size: 25px;font-weight: bold;text-align: center;">成家立业  百业联盟</view>
								<view style="font-size: 15px;font-weight: bold;text-align: center;margin-top:10px ;" v-if="coinChangeindex == 0">
									<text style="color:red;" >198元</text>享396元幸福豆</view>
								<view style="font-size: 15px;font-weight: bold;text-align: center;margin-top:10px ;" v-if="coinChangeindex == 1">
										<text style="color:red;" >2998元</text>享5996元幸福豆</view>
								<view style="font-size: 15px;font-weight: bold;text-align: center;margin-top:10px ;" v-if="coinChangeindex == 2">
												<text style="color:red;" >9998元</text>享19996元幸福豆</view>
								<view style="font-size: 15px;font-weight: bold;text-align: center;margin-top:10px ;color:red;"  v-if="coinChangeindex == 0">本   区</view>
								<view style="font-size: 15px;font-weight: bold;text-align: center;margin-top:10px ;color:red;"  v-if="coinChangeindex == 1">本   市</view>
								<view style="font-size: 15px;font-weight: bold;text-align: center;margin-top:10px ;color:red;"  v-if="coinChangeindex == 2">全   国</view>
								<view style="font-size: 23px;font-weight: bold;text-align: center;color:orange;margin-top:10px ;">会员尊享  消费补贴</view>
								</view>
				<view class="pd-lg" style="padding-top: 2rpx;">
					<view class="shop-bg flex-column">
						<view class="f-md-title c-base flex-center">商家消费补贴 积分增值</view>
						<view class="f-title c-base ml-sm flex-warp">
							<view class="f-title c-base ml-sm">
								1.用户凡是加入：
							</view>
							<view class="f-title c-warning" style="width: 150rpx;">伴伴生活</view>
							<view class="f-title c-base">
								商家承诺消费补贴，积分增值，所有商品及服务均可享受消费抵扣幸福豆福利。
							</view>
						</view>
						<view class="f-title c-base ml-sm mt-lg">
							2.致力打造web3.0商业综合服务平台，共享积分消费券分享获得劳务报酬福利。
						</view>
						<view class="f-title c-base ml-sm mt-lg">
							3.力求互惠互利，平等交易的原则。发扬互帮
						</view>
						<view class="f-title c-base ml-sm mt-lg">
											会员：享受本区内茶水费全免权益，          有效期为1年。
						</view>
						<view class="f-title c-base ml-sm mt-lg">
							vip：享受本市内跨店茶水费全免权益，      有效期为1年。
						</view>
						<view class="f-title c-base ml-sm mt-lg">
							贵宾：享受全国市内跨店茶水费全免权益，有效期为1年。
						</view>
						<view class="f-title c-base ml-sm mt-lg">
							互助的光荣传统。建立共存共荣优良的百业联盟商业体系。
						</view> -->
						
						<!-- <view class="flex-between mt-lg mb-lg ml-lg mr-lg">
							<view @click="goEdit" class="btn f-desc c-base radius-10 pl-lg pr-lg">编辑</view>
							<view class="f-desc c-warning"> 伴伴生活</view>
							<view class="btn f-desc c-base radius-10 pl-lg pr-lg">提交</view>
						</view> -->
						
					<!-- </view> -->
					
					<!-- <view class="quan-bg flex-column">
						<view class="f-md-title c-black">消费补贴 积分增值使用说明：</view>
						<view class="f-title c-black ml-lg">1.积分与幸福豆具备消费凭据，</view>
						<view class="f-title c-black ml-lg">2.商家产品可以使用幸福豆消费，</view>
						<view class="f-title c-black ml-lg" style="padding-left: 10px;">积分与实体商家进行当场即时核销使用，</view>
						<view class="f-title c-black ml-lg" style="padding-left: 10px;">同时积分还可以跨店跨行业使用，</view> -->
						<!-- <view class="f-title c-black ml-lg">3.用户可使用幸福豆参加相亲及商业活动。</view> -->
						
					<!-- </view> -->
					
				<!-- 	<view class="user-bg flex-column">
						<view class="flex-x-center">
							<view class="flex-column mr-lg">
								<view class="f-title" style="color: #8ec2e5;">{{detail.user_num}}</view>
								<view class="f-little c-black flex-y-center">
									<i class="iconfont clock" style="font-size: 22rpx;" :style="{color:primaryColor}"></i>
									参与人数
								</view>
							</view>
							<view class="flex-column ml-lg">
								<view class="f-title" style="color: #eaad7c;">{{detail.traffic_volume}}</view>
								<view class="f-little c-black flex-y-center">
									<i class="iconfont clock" style="font-size: 22rpx;"></i>
									访问量
								</view>
							</view>
						</view>
						<view style="width: 100%;" class="flex-warp">
							<view class="fill-base pb-md pl-md pr-md pd-lg flex-center"
								v-for="(item, index) in detail.user_list" :key="index" style="width: 14%;">
								<view @tap.stop="goUserDetail(item.id)" class="flex-column">
									<image mode="aspectFill" class="cover" :src="item.avatar"></image>
									<view style="margin-top: 5rpx; max-height: 40rpx; max-width: 80rpx; white-space: normal; overflow: hidden; -webkit-line-clamp: 1;">{{item.user_nicename}}</view>
								</view>
							</view>
						</view>
					</view> 
					
					<view class="shop-list-bg flex-column">
						
						<view style="width: 100%;" class="flex-warp">
							<view class="fill-base pb-md pl-md pr-md pd-lg flex-center"
								v-for="(item, index) in detail.goods_list" :key="index" style="width: 33%;">
								<view @tap.stop="goGoodsDetail(item.id)" class="flex-column">
									<image mode="aspectFill" class="cover" :src="item.thumbs"></image>
									<view class="f-title flex-center" style="margin-top: 5rpx;">豆:{{item.original_price - item.present_price}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="msg-bg fill-base flex-column">
						<view class="flex-center mb-lg" style="width: 100%;">
							<view class="btn f-md-title c-base flex-center">使用须知</view>
						</view>
						<view class="f-title c-black ml-sm mb-lg">
							使用须知：<br/>
							1.消费结束后，商家福利仍可正常使用；<br/>
							 2.点击有上角“..”收藏，可以做为带货商品，享受分享福利；<br/> 
							2.商家福利，请查看商家复现详细说明；<br/>
							3.本活动为特价消费补贴福利，一经购买不予退款；<br/>
							4.该幸福豆适用于参与本活动品牌指定门店；<br/>
							5.兑换时，请到平台认证门店使用进入相应商家扫码核销；<br/>
							6.长按下图二维码，获取活动相关通知；<br/>
							7.平台有权利更换等价商家优惠；<br/>
							8.在法律允许范围内，平台拥有解释权；<br/>
						</view>
						<view class="flex-center" style="width: 100%;">
							<image mode="aspectFill" class="cover mr-md" src="/static/common/kefu_code.png"></image>
							<view class="c-base flex-center flex-column ml-lg">
								<view class="f-icontext c-black flex-center">客服电话：136 8640 0082</view>
								<view class="f-title c-black flex-center mt-md">长按识别二维码</view>
								<view class="f-title c-black flex-center">免单会相关咨询</view>
							</view>
						</view>
					</view>
				</view>-->
			</view>
			<view v-if="activeIndex == 1">
				<view class="fill-base flex-1 radius-20 pd-md mb-md">
					<view class="flex-between" style="width: 100%;">
						<!-- <view class="f-title c-title">总金币数</view> -->
						<view class="f-title c-title" style="margin-left: 70%;" @click="goWithdrawal">提现记录</view>
					</view>
					
					<!-- <view class="flex-column mt-lg" style="width: 100%;">
						<view class="f-md-title c-title b-1px-b">{{profit.votestotal}}</view>
						
					</view> -->
					
					<!-- <view class="flex-1 flex-y-baseline mt-lg" style="width: 100%;">
						<view class="f-title c-title mr-lg">可提现金币数</view>
						<view class="f-md-title c-title" :style="{color:primaryColor}">{{profit.votes}}</view>
					</view> -->
				</view>
				
				<view class="fill-base flex-1 radius-20 pd-md mb-md">
					<view class="flex-between" style="width: 100%;">
						<view @click="goWebView('2,3')" class="f-desc c-base radius-16 flex-center mb-sm" style="width: 150rpx; height: 60rpx;background-color: gray;margin-top: 10rpx;;">余额明细</view>
						<view class="f-title c-title">可到账金额</view>
						<view class="f-md-title c-title" :style="{color:primaryColor}">￥{{money}}</view>
					</view>
				</view>
				
				<view class="f-desc c-desc flex-center">

				请你务必审慎阅读、充分理解“用户协议”和“隐私政策”各条款及用户提现说明。包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。你可阅读《用户协议》和《隐私政策》及用户提现说明了解详细信息。用户提现时需要扣除平台管理费15%作为平台对用户的管理服务费。  如果你同意，请点击下面按钮开始接受我们的服务。    
根据平台规定，用户进行微信支付小程序线上交易支付与收款，需要在平台线上门店或线下门店消费198元后，既可开通平台支付认证提现，{{profit.tips}}。一切咨询解释权都归平台所有。

				</view>
			</view>
		</view>

		<view class="space-max-footer"></view>
		<!-- <view class="paydoudou" v-if="isshowdou">
			<view class="betweentext">
			<text> 幸福豆：{{hbeanprice}}</text>
			<text style="color:lightgrey;">(总：{{userInfo.withdraw}})</text>
		<radio  :value="1" :checked="isusedou" @click="nouselegumes"/>
		</view>
		</view> -->
		<fix-bottom-button v-if="activeIndex==1" @confirm=toPay
			:text="[{type:buttonType,text:confirmText}]" bgColor="#fff">
		</fix-bottom-button>
		<view class="overlay"  v-show="showPopup" @click="showPopup=false"> .</view>
		<view class="popup-container" v-show="showPopup">
			
		      <view class="popup-content">   
		        <text style="font-weight:bold;">选择充值的金额</text> 
				 <view>  </view>
				<view style="margin-top: 20px;">
					<text v-for="(item,index) in cardlist" v-if="index<3" :class="rechargemoney==item.price?'labelactive':'labelmoney'" @click="checkmoney(item,index)">{{item.price}}</text>
				</view>
				<button class="rechargebtn" @click="toRechargepay()">立即充值</button>
		      </view>  
			  <view class="c-caption" style="margin-left:25px;">
			  	<view>1.充值的本金和赠送金额均不可提现、转移、转赠</view>
			  	<view>2.使用范围：本平台所有项目皆可购买，以及交通费支付</view>
			  </view>
		    </view> 
	</view>
	 
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import parser from "@/components/jyf-Parser/index";
	import $api from '@/api/index.js';
	export default {
		components: {
			parser
		},
		data() {
			return {
				agree:false,
				buttonBgColor:'#fff',
				buttonType:'confirm',
				confirmText: '确认支付',
				activeIndex: 0,
				tabList: [
					{
						title: '钱包',
						id: 0
					}, {
						title: '收益',
						id: 1
					},
				],
				options: {},
				coinChangeindex: 0,
				coins: [],
				detail: {},
				isusedou:true,
				isshowdou:true,
				is_sign:0,
				lockTap: false,
				profit: {},
				money: '',
				hbeanprice:0,
				totalprice:0,
				rechargemoney:100,
				cardlist:[],
				showPopup:false,
				cardindex:0,
				is_ios:0,
				imagelist: ['https://card-1253902191.cos.ap-chengdu.myqcloud.com/image/666/22/09/709c5224a2a54ba0b4857779206b2118.MOV'],
				imagesrc: [
					'https://xcx.bbi-love.com/static/main/member.png',
					'https://xcx.bbi-love.com/static/main/vip.jpg',
					'https://xcx.bbi-love.com/static/main/svip.png'
				]
				
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			let that = this
			uni.getSystemInfo({  
			    success: function(res) {  
			        // 判断平台类型  
			        if (res.platform === 'ios') {  
						that.is_ios=1;
			            console.log('当前设备为iOS机型');  
			        } else {  
						that.is_ios=0;
			            console.log('当前设备非iOS机型');  
			        }  
			    }  
			});
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['getUserIndex']),
			async initIndex(refresh = false) {
				this.getBalance()
				this.getProfit()
				this.getCash()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.initIndex(true)
			},
			nouselegumes()
			{
				this.isusedou = !this.isusedou
				if(this.isusedou ==false)
				{
					uni.showToast({
						
						title:'需要支付对应金额的幸福豆才能购买会员'
					})
				}
			},
			//获取钱包
			async getBalance() {
				let data = await this.$api.user.getBalance();
				// debugger
				this.detail = data;
				this.coins = this.detail.rules;
				this.imagesrc = this.detail.vipimagesrc;
				this.totalprice = this.coins[0].money;
				this.hbeanprice = this.coins[0].money/2;
				if(this.coins.length > 0){
					this.confirmText = '确认支付(￥' + this.coins[0].money/2 + ')'
				}
				// debugger
				console.log('===钱包', data)
				this.$util.hideAll()
			},
			//收益接口
			async getProfit() {
				let data = await this.$api.user.getProfit();
				this.profit = data;
				// this.money = (data.votes * (100 - data.cash_take) / 100 / data.cash_rate).toFixed(2)	
				this.money = parseFloat(data.balance_total) + parseFloat(data.balance)
				console.log('===收益接口', data)
				this.$util.hideAll()
			},
			async getCash(){
				let waterList = await this.$api.user.cashList({'status':0});
				if(waterList.length !== 0){
					this.buttonType = ''
					this.confirmText = '提现审核中......'
				}
			},
			async sign(){
				let data = await this.$api.user.getSign();
				this.is_sign = 1;
				if(data){
					
					this.$util.showToast({
						title: data
					})	
					this.initRefresh();
				}
				
			},
			goWebView(types){
				// let url = 'https://app.bbi-love.com/Appapi/Detail/index&uid=' + this.userInfo.id
				// this.$util.goUrl({
				// 	url: '/user/pages/wallet/web-view?url=' + url
				// })
				this.$util.goUrl({
					url: '/user/pages/stored/consume?types='+types
				})
				
			},
			gorecord(){
				this.$util.goUrl({
					url: '/user/pages/wallet/hbeanrecord'
				})
			},
			clickImg(){
				var url = "https://app.bbi-love.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			handerCoinChange(item, index) {
				this.coinChangeindex = index
				this.confirmText = '确认支付(￥' + item.money/2 + ')'
				this.hbeanprice = item.money/2
			},
			
			handerTabChange(index) {
				this.activeIndex = index
				if(this.activeIndex == 0){
					if(this.coinChangeindex == 0){
						this.totalprice = this.coins[0].money
						this.confirmText = '确认支付(￥'+this.totalprice/2+')'
						this.hbeanprice = this.totalprice/2
					} else if(this.coinChangeindex == 1){
						this.totalprice = this.coins[1].money
						
						this.confirmText = '确认支付(￥'+this.totalprice/2+')'
						console.log(this.totalprice)
						this.hbeanprice = this.totalprice/2
					} else {
						this.totalprice = this.coins[2].money
						this.confirmText = '确认支付(￥'+this.totalprice/2+')'
						this.hbeanprice = this.totalprice/2
					}
					this.isshowdou = true;
				} else {
					if(this.buttonType === ''){
						this.confirmText = '提现审核中......'
					}else{
						this.confirmText = '立即提现'
					}
					
					this.isshowdou = false
				}
			},
			goVip(){
				this.$util.goUrl({
					url: '/user/pages/wallet/viplist'
				})
			},
			goWithdrawal(){
				this.$util.goUrl({
					url: '/user/pages/wallet/withdrawallist'
				})
			},
			// 提现
			async setCash(){
				let rs = await this.$api.user.microCash({
					cashvote: this.money
				})
				if(rs){
					uni.showToast({
						icon:'success',
						title:'申请提现成功'
					})
					this.buttonType=''
					this.confirmText='提现审核中......'
				}
			},
			// 去支付
			async toPay() {
				if(this.activeIndex == 0){
					let data = this.coins[this.coinChangeindex]
					if (this.lockTap) return;
					this.lockTap = true;
					this.$util.showLoading()
					try {
						let {
							pay_list
						} = await this.$api.user.bindUserPhone({
							changeid: data.id
						})
						this.$util.hideAll()
						if (pay_list) {
							try {
								await this.$util.pay(pay_list)
								this.lockTap = false;
								await this.getMineInfo()
								this.$util.back()
							} catch (e) {
								this.lockTap = false;
								return;
							}
						}
					} catch (e) {
						setTimeout(() => {
							this.lockTap = false
							this.$util.hideAll()
						}, 2000)
					}
				} else {
					this.setCash()
				}
			},
			
			// 余额充值
			async toRechargepay() {
				let {
					id: card_id,
					true_price
				} = this.cardlist[this.cardindex]
				if (this.lockTap) return;
				this.lockTap = true;
				this.$util.showLoading()
				try {
					let {
						pay_list
					} = await this.$api.mine.payBalanceOrder({
						card_id
					})
					this.$util.hideAll()
					if (pay_list) {
						try {
							await this.$util.pay(pay_list)
							this.lockTap = false;
								this.lockTap = false;
								await this.getMineInfo()
								this.$util.back()
							} catch (e) {
								this.lockTap = false;
								return;
							}
						}
					} catch (e) {
						setTimeout(() => {
							this.lockTap = false
							this.$util.hideAll()
						}, 2000)
					}
				
			},
			goEdit() {
				this.$util.goUrl({
					url: '/user/pages/wallet/edit'
				})
			},
			goUserDetail(id) {
				let url = `/user/pages/user-detail?id=${id}`
				this.$util.goUrl({
					url
				})
			},
			// 详情
			goGoodsDetail(id) {
				let url = `/user/pages/detail?id=${id}`
				this.$util.goUrl({
					url
				})
			},
			    async showPopupFromBottom() {  
			      // 显示弹出框  
			      this.showPopup = true;  
				  let param={
					  limit:20
				  }
				  let newList = await this.$api.mine.cardList(param);
				  
				  	this.cardlist = newList.data
			  
			      // 延迟一段时间后隐藏弹出框，模拟滑动效果  
			      setTimeout(() => {  
			        this.showPopup = false;  
			      }, 100000); // 这里的 3000 毫秒可以根据需要调整  
			    }, 
				checkmoney(item,index)
				{
					this.rechargemoney = item.price
					this.cardindex = index
				},
		}
		
	}
</script>

<style lang="scss">
	.pages-home {
		background-color: #eaeaea;
		.view-bg {
			position: relative;
			max-width: 25%;
			padding: 10rpx 15rpx;
			text-align: center;
			border-radius: 50px;
			border: 1rpx solid #333;
		}
		
		.view-info-bg {
			position: relative;
			max-width: 50%;
			padding: 10rpx 15rpx;
			text-align: center;
			border-radius: 50px;
			border: 1rpx solid #333;
		}
		
		.item-btn {
			height: 54rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}
		
		.cover {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50rpx;
		}
		
		.total-box {
			width: 100%;
			height: 84rpx;
			background-color: #fff;
			.box-btn {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #e4e4e4;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
			.box-btn2 {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #bccfde;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
		}
	
		.user-item {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 44%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
		}
		
		.user-list {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
			}
		}
		
		.msg {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			padding-bottom: 120rpx;
		}
	
		.image1 {
			position: absolute;
			margin: 20rpx 0rpx;
			border-radius: 42rpx;
			
			width: 96%;
			// text-align: center;
		}
		
		.shop-bg {
			background-color: #a27b6c;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
			.btn {
				background-color: #5e2d37;
			}
		}
		
		.quan-bg {
			background-color: #dededc;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
		}
		
		.user-bg {
			background-color: #fff;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
			.cover {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
			}
		}
		
		.shop-list-bg {
			background-color: #fff;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
			.cover {
				width: 160rpx;
				height: 100rpx;
				border-radius: 20rpx;
			}
		}
		
		.msg-bg {
			background-color: #fff;
			border-radius: 42rpx;
			margin: 10rpx 0rpx;
			padding: 15rpx 15rpx;
			margin-bottom: 40rpx;
			.btn {
				width: 60%;
				height: 80rpx;
				background-color: #d04860;
				border-radius: 20rpx;
			}
			.cover {
				width: 160rpx;
				height:160rpx;
				border-radius: 0rpx;
			}
		}
		
		.item-btn {
			height: 54rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}
		.total-box {
			width: 100%;
			height: 84rpx;
			background-color: #fff;
			.box-btn {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #e4e4e4;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
			.box-btn2 {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #bccfde;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
			.box-btn3 {
				width: 100%;
				height: 62rpx;
				background-repeat: no-repeat; /* 防止重复平铺 */
				background-position: center; /* 居中显示 */
				background-size: contain; /* 按比例缩放到完全包含容器内部 */
			}
		}
			
		.user-item {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 44%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
		}
		
		.user-list {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
			}
		}
		
		.msg {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			height: 100rpx;
			padding-bottom: 400rpx;
			// padding: 10px 6px;
		}
		
	  .paydoudou{
		   position: fixed;
		   bottom: 55px; 
		   width: 100%; 
		   height:57px;
		   padding:10px;
		   			
		   background-color: #fff;
	  }
	  .betweentext{
		  display: flex;
		  justify-content: space-between;
		  padding: 10px;
	  }
	}
	.overlay {  
	  position: fixed;  
	  top: 0;  
	  left: 0;  
	  right: 0;  
	  bottom: 0;  
	  background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色 */  
	  z-index: 990; /* 确保层在最上面 */  
	}  
	.popup-container {  
	  position: fixed;  
	  bottom: 0;  
	  width: 100%;  
	  height: 200px; /* 弹出框的高度，可以根据需要调整 */  
	  background-color: #fff;  
	  transition: transform 0.3s ease-out; /* 动画效果 */  
	   z-index: 999; /* 确保层在最上面 */ 
	} 
	  
	.popup-content {  
	  padding: 20px;  
	}  
	  
	/* 当 showPopup 为 true 时，应用动画效果 */  
	.popup-container[v-show] {  
	  transform: translateY(-100%);  
	}  
	.labelmoney{
		margin:3px;
		padding: 10px 33px;
		background-color: lightgrey;
		color:#fff;
		border-radius: 25px;
		margin-top: 30px;
		
	}
	.labelactive{
		margin:3px;
		padding: 10px 33px;
		background-color: #1AAD19;
		color:#fff;
		border-radius: 25px;
		margin-top: 30px; 
	}
	.rechargebtn{
		background-color: #8228f9;
		color:#fff;
		margin-top: 30px;
	}
</style>
